<template>
    <div>
        <van-radio-group v-model="checkedOptions">
            <van-cell-group>
                <van-cell v-for="(item,index) of refundList" :key="index" :title="item.value" clickable @click="checkedOptions = index">
                <template #right-icon>
                    <van-radio :name="index"/>
                </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
        <van-field v-model="money" type="number" label="退款金额" placeholder="请输入需要退款的金额"/>
        <van-field
        v-model="remark"
        rows="2"
        autosize
        label="退款备注"
        type="textarea"
        maxlength="200"
        placeholder="请输入退款备注"
        show-word-limit
        />
        <div class="img-content">
            <van-uploader multiple v-model="img" :after-read="afterRead" :max-count="1"/>
        </div>
        <van-button type="danger" size="large" class="sub-btn" @click="uploadRefound">提交退款</van-button>
    </div>
</template>
<script>
import {UploadImage,RefundOptions,ApplyRefund} from '../ajax'
import { Toast,Notify } from 'vant'
export default {
    data() {
        return {
            remark:'',
            image:'',
            refundList:[],
            img:[],
            checkedOptions:-1,
            money:0
        }
    },
    created(){
        const data = {
            admin_id:this.$store.getters.admin_id,
            type:2
        }
        RefundOptions(data).then(res=>{
            // console.log(res);
            this.refundList = res;
        })
    },
    methods:{
        afterRead(file){
            console.log(file.file);

            this.image = file.file;
            this.img = [{url:file.content,isImage: true}]
            // const data = {
            //     image:file.file
            // }
            // UploadImage(data).then(res=>{
            //     console.log(res);
            //     this.img = [{url:res}];
            // })
        },
        uploadRefound(){
            if(this.checkedOptions<0){
                Notify({ type: 'danger', message: '请选择退款理由' });
                return;
            }else if(!this.image){
                Notify({ type: 'danger', message: '请上传需退款的产品图片' });
                return;
            }else if(!this.money){
                Notify({ type: 'danger', message: '请输入退款金额' });
                return;
            }
            const data = {
                back_reason:'退款理由:'+this.refundList[this.checkedOptions].value+',退款备注:'+this.remark?this.remark:'无备注'+',退款金额'+this.money,
                order_no:this.$route.query.order_no,
                image:this.image
            }
            ApplyRefund(data).then(res=>{
                console.log(res);
                Toast('提交成功,等待审核');
                history.go(-1);
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .van-cell__title{
        font-weight: 500;
        font-size: 1rem;
    }
    .img-content{
        padding: 1rem;
    }
    .sub-btn{
        position: absolute;
        bottom: 0;
    }
</style>